<template>
    <div>
		<div class="title">
			<div class="col-lg-10">
				<div class="details">工资发放查询与申请</div>
				
				<ol class="breadcrumb">
					<li><a>首页</a></li>
					<li><a>工资发放管理</a></li>
					<li><a>工资发放查询与申请</a></li>
				</ol>
			</div>
		</div>	
		<div v-if="stuas === 1" class="center">
			<div style="display:flex;">
				<div class="titles" @click="stuas = 1"
				:class="{cartype:true,activetype:stuas === 1}"
				>批量工资发放</div>
			<div class="titles" @click="stuas = 2"
			:class="{cartype:true,activetype:stuas === 2}"
			>个人工资发放</div>
			</div>
			
			<div class="center_details">
			<div class="center_details_query">
				<el-button type="info" size="mini" style="font-size: 14px;">详情列表下载</el-button>
				<el-button type="danger" size="mini" style="font-size: 14px;">删除记录</el-button>
				<el-input
				style="width:100px;"
				placeholder="批次名称"
				size="mini"
				v-model="input"
				clearable>
				</el-input>
				 <el-date-picker
				 	v-model="value1"
					type="daterange"
					range-separator="-"
					:start-placeholder="begintime"
					:end-placeholder="endtime"
					size="mini"
					value-format="timestamp"
					prefix-icon="el-icon"
					style="width:202px;"
					>
					</el-date-picker>
					<el-select v-model="value" placeholder="批次状态" size="mini">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<el-select v-model="value" placeholder="代发方式" size="mini">
						<el-option
						v-for="item in lists"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				<el-button type="danger" @click="query()" size="mini" style="font-size: 14px;padding-left: 20px;" icon="el-icon-search">查询</el-button>
				<el-button type="danger" size="mini" style="font-size: 14px;">重置</el-button>
				<el-button type="danger" size="mini" style="font-size: 14px;" icon="el-icon-plus" >发工资</el-button>
			</div>
					<el-table
					:data="list"
					class="tableBox"
					border
					:cell-style="{height:'20px'}"
					style="width: 100%"
					>
					<el-table-column
					label="序号"
					type="index"
					width="50"
					fit="false">
					</el-table-column>
					<el-table-column
					type="selection"
					width="55">
					</el-table-column>
					<el-table-column
					prop="name"
					label="批次名称"
					width="100"
					style="height:80rpx;"
					>
					</el-table-column>
					
					<el-table-column
					prop="province"
					label="经办人"
					width="100">
					</el-table-column>
					<el-table-column
					prop="city"
					label="发薪申请日期"
					width="100">
					</el-table-column>
					<el-table-column
					prop="address"
					label="发薪日期"
					width="100">
					</el-table-column>
					<el-table-column
					prop="zip"
					label="总笔数"
					width="100">
					</el-table-column>
					<el-table-column
					prop="money"
					label="总金额（元）"
					width="100">
					</el-table-column>
					<el-table-column
					prop="price"
					label="发薪成功笔数"
					width="100">
					</el-table-column>
					<el-table-column
					prop="smoney"
					label="发薪成功金额（元）"
					width="100">
					</el-table-column>
					<el-table-column
					prop="money_type"
					label="代发方式"
					width="100">
					</el-table-column>
					<el-table-column
					prop="staus"
					label="批次状态"
					width="100">
					<!-- <template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="danger" size="mini">详情</el-button>
					</template> -->
					</el-table-column>
					<el-table-column
					fixed="right"
					label="操作"
					width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="danger" size="mini">详情</el-button>
					</template>
					</el-table-column>
					</el-table>
					<div class="neirong"></div>
			<div class="footer" style="display: flex;">
		           <div>显示第 1 至第 10 条，共 18 条</div>
		           <div style="margin-left:200px">
		               <span>首页</span>
		               <span>上一页</span>
		               <input type="number"  />
		               <span>共 2 页</span>
		               <span>下一页</span>
		               <span>末页</span>
		               <select>
		                   <option label="10"></option>
		               </select>
		           </div>
		           <div class="downloadFile">
		               <el-button style="margin-left:180px" type="danger" size="mini">个人明细下载</el-button>
		           </div>
      </div>
			</div>
		</div>
		<!-- 个人工资发放 -->
		<div v-if="stuas === 2" class="center">
			<div style="display:flex;">
				<div class="titles" 
				@click="stuas = 1"
				:class="{cartype:true,activetype:stuas === 1}"
				>批量工资发放</div>
			    <div class="titles" 
				:class="{cartype:true,activetype:stuas === 2}"
				@click="stuas = 2">个人工资发放</div>
			</div>
		
			
			
			<div class="center_details">
			<div class="center_details_querys">
				
				<el-input
				style="width:100px;"
				placeholder="姓名/证件号"
				size="mini"
				v-model="input"
				clearable>
				</el-input>
				 <el-date-picker
					v-model="value1"
					type="daterange"
					range-separator="-"
					start-placeholder="2020-04-25"
					end-placeholder="2020-04-26"
					size="mini"
					prefix-icon="el-icon"
					style="width:202px;"
					>
					</el-date-picker>
					<el-select v-model="value" placeholder="批次状态" size="mini">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<el-select v-model="value" placeholder="代发方式" size="mini">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				<el-button type="danger" size="mini" style="font-size: 14px;" icon="el-icon-search">查询</el-button>
				<el-button type="danger" size="mini" style="font-size: 14px;">重置</el-button>
				<el-button type="danger" size="mini" style="font-size: 14px;" icon="el-icon-plus" >发工资</el-button>
			</div>
					<el-table
					:data="lists"
					class="tableBox"
					border
					:cell-style="{height:'20px'}"
					style="width: 100%"
					>
					<el-table-column
					label="序号"
					type="index"
					width="50"
					fit="false">
					</el-table-column>
					<el-table-column
					prop="name"
					label="批次名称"
					width="100"
					style="height:80rpx;"
					>
					</el-table-column>
					<el-table-column
					type="selection"
					width="55">
					</el-table-column>
					<el-table-column
					prop="province"
					label="经办人"
					width="100">
					</el-table-column>
					<el-table-column
					prop="city"
					label="发薪申请日期"
					width="100">
					</el-table-column>
					<el-table-column
					prop="address"
					label="发薪日期"
					width="100">
					</el-table-column>
					<el-table-column
					prop="zip"
					label="总笔数"
					width="100">
					</el-table-column>
					<el-table-column
					prop="money"
					label="总金额（元）"
					width="100">
					</el-table-column>
					<el-table-column
					prop="price"
					label="发薪成功笔数"
					width="100">
					</el-table-column>
					<el-table-column
					prop="smoney"
					label="发薪成功金额（元）"
					width="100">
					</el-table-column>
					<el-table-column
					prop="money_type"
					label="代发方式"
					width="100">
					</el-table-column>
					<el-table-column
					prop="staus"
					label="批次状态"
					width="100">
					<!-- <template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="danger" size="mini">详情</el-button>
					</template> -->
					</el-table-column>
					<el-table-column
					fixed="right"
					label="操作"
					width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="danger" size="mini">详情</el-button>
					</template>
					</el-table-column>
					</el-table>

			</div>
		</div>
	</div>
</template>

<script>
export default {
    data(){
        return {
				stuas : 1,
				input:'',
				value:0,
				value1:'',
				begintime:'2021-4-25',
				endtime:'2021-4-26',
				lists:[],
				options: [{
						value: '选项1',
						label: '处理中'
						}, {
						value: '选项2',
						label: '处理完成'
						}, {
						value: '选项3',
						label: '处理失败'
						}],
						lists:[
							{
						value: '选项1',
						label: '银行网点发薪'
						}, {
						value: '选项2',
						label: '公司网银发薪'
						},
						],
						list:[{
						name:'华新2月(万州、北二运行、裕中除姬宝）绩效中信发放',
						province:'韩茜茜',	
						city:'20210407',	
						address:'20210407',	
						zip:'36',
						money:'85067.49',	
						price:'36',
						smoney:'85067.49',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	


						},
						{
						name:'华新2月（煤化工、宁煤）绩效中信发放',
						province:'韩茜茜',	
						city:'20210401',	
						address:'20210401',	
						zip:'38',
						money:'251761.12',	
						price:'38',
						smoney:'251761.12',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	
						},
						{
						name:'煤化工崔杰2人	',
						province:'韩茜茜',	
						city:'20210331',	
						address:'20210331',	
						zip:'2',
						money:'2560.64',	
						price:'2',
						smoney:'2560.64',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},
						{
						

						name:'2月工资发放表',
						province:'韩茜茜',	
						city:'20210327',	
						address:'20210327',	
						zip:'21',
						money:'150319.89',	
						price:'21',
						smoney:'150319.89',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},
						{
						name:'1月工资发放表',
						province:'韩茜茜',	
						city:'20210327',	
						address:'20210327',	
						zip:'14',
						money:'52825',	
						price:'36',
						smoney:'85067.49',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},{
						name:'华新2月中信发放',
						province:'韩茜茜',	
						city:'20210326',	
						address:'20210327',	
						zip:'252',
						money:'1722990.54',	
						price:'252',
						smoney:'1722990.54',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},{
						name:'中信个人幸福基金表',
						province:'韩茜茜',	
						city:'20210226',	
						address:'20210226',	
						zip:'86',
						money:'353724',	
						price:'86',
						smoney:'353724',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},{

						name:'中信公司幸福基金表',
						province:'韩茜茜',	
						city:'20210226',	
						address:'20210226',	
						zip:'58',
						money:'768953.28',	
						price:'58',
						smoney:'768953.28',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},{
						name:'中信个人幸福基金表',
						province:'韩茜茜',	
						city:'20210226',	
						address:'20210226',	
						zip:'87',
						money:'389724',	
						price:'',
						smoney:'',	
						money_type:'公司网银发薪',	
						staus:'发薪失败',	

						},{
						name:'中信银行开薪易工资发放模板 (1) - 副本',
						province:'韩茜茜',	
						city:'20210209',	
						address:'20210209',	
						zip:'88',
						money:'2862329.17',	
						price:'88',
						smoney:'2862329.17',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',	

						},{
						name:'中信1月工资发放',
						province:'韩茜茜',	
						city:'20210207',	
						address:'20210209',	
						zip:'270',
						money:'1447247.51',	
						price:'270',
						smoney:'1447247.51',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{
						name:'12月中信乌中旗绩效发放',
						province:'韩茜茜',	
						city:'20210204',	
						address:'20210204',	
						zip:'12',
						money:'47857.33',	
						price:'12',
						smoney:'47857.33',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{
						name:'12月裕中中信发放',
						province:'韩茜茜',	
						city:'20210203',	
						address:'20210203',	
						zip:'29',
						money:'109254.44',	
						price:'29',
						smoney:'109254.44',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{
						

						name:'12月中信五彩湾煤化工宁煤绩效发放',
						province:'韩茜茜',	
						city:'20210201',	
						address:'20210201',	
						zip:'42',
						money:'154699.67',	
						price:'42',
						smoney:'154699.67',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{

						name:'12月五彩湾煤化工宁煤绩效发放',
						province:'韩茜茜',	
						city:'20210201',	
						address:'20210201',	
						zip:'42',
						money:'0',	
						price:'0',
						smoney:'2862329.17',	
						money_type:'公司网银发薪',	
						staus:'发薪失败',
						},{
						name:'中信',
						province:'韩茜茜',	
						city:'20210129',	
						address:'20210129',	
						zip:'46',
						money:'164102.66',	
						price:'46',
						smoney:'164102.66',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{
						name:'12月中信发放',
						province:'韩茜茜',	
						city:'20210122',	
						address:'20210122',	
						zip:'138',
						money:'685503.13',	
						price:'138',
						smoney:'685503.13',	
						money_type:'公司网银发薪',	
						staus:'发薪完成',
						},{
						name:'中信银行12月工作发放',
						province:'韩茜茜',	
						city:'20210122',	
						address:'20210122',	
						zip:'138',
						money:'685503.13',	
						price:'',
						smoney:'',	
						money_type:'',	
						staus:'已撤销',
						},
						]
						
		}

		
    },
	methods:{
		handleClick(){
			this.$emit("closeImg")
			this.$router.push({
						name: "xq",
					  });

		},
		query(){//根据时间查询
			console.log(this.value1);
			console.log(this.value1[0]);
			this.list.map((item,index)=>{
			if(new Date(this.list[a]['city']).getTime<this.value1[0]&&new Date(this.list[a]['address']).getTime>this.value1[1]){
			console.log('111');
			}
			})
		// 	for(var a=0;a<this.list.length;a++){
		// 		console.log('111');
		// 		// this.list[a]['city'];
		// 		// this.list[a]['address'];
		// 		var b = new Date(this.list[a]['city']).getTime();
		// 		console.log(this.list[a]['city']);
		// 		console.log(b)
			
		// 	}
		// }
		}
	}
	
}

</script>

<style scoped>
.title{
	padding: 20px 0px 20px 20px;
	background-color: #ffffff;
}
.white-bg {
    background-color: #ffffff;
}
.page-heading {
    border-top: 0;
    padding: 0 10px 20px 10px;
}
.wrapper {
    padding: 0 20px;
}
.border-bottom {
    border-bottom: 1px solid #e7eaec !important;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: "微软雅黑",Helvetica, Arial, sans-serif;
    background-color: #233644;
    font-size: 14px;
    overflow-x: hidden;
}
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
.breadcrumb {
    background-color: #ffffff;
    padding: 0;
    margin-bottom: 0;
	display: flex;
	font-size: 14px;
}
.el-table .cell {
  font-weight: normal;
    overflow: hidden;
    white-space: pre;
   
    padding: 0 2px 0 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid;
}

.details{
	margin: 10px 0px 10px 0px;
	font-size: 24px;
}
.center{

	background-color:#f7f7f7;
	padding: 20px 0px 0px 15px;
}
.center_details{
	padding: 20px;
	background-color: #fff;
}
.center_details_query{
	margin: 15px 20px 15px 10px;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
}
.center_details_querys{
margin: 15px 20px 15px 200px;
}
.tableBox th {
       padding: 0 !important;
       height: 48px;
       line-height: 48px;
   }
   .tableBox td{
       padding: 0 !important;
       height: 48px;
       line-height: 48px;
   }
   .titles{
	   background: #f2f2f2;
	   color: #000;
	   width: 160px;
	   height: 50px;
	   line-height: 50px;
	   font-size: 20px;
	   text-align: center;
   }
   .cartype.activetype{
	   background: #fff;
	   color: #ff0000;
	   width: 160px;
	   font-size: 20px;
	   text-align: center;
   }
   .neirong{
	   height: 40px;
	   /* border:#000 solid 0.5px; */
   }
</style>